import {Button, Col, Form, Input, Modal, Row} from "antd";
import {CloseOutlined, SaveOutlined} from "@ant-design/icons";

const {Item} = Form;

const NacosConfigAddModal = (props) => {
    const {
        messageApi,
        nacosConfigAddParam,
        setNacosConfigAddParam,
        doAddNacosConfig,
    } = props;

    // 关闭modal并重置表单
    const closeNacosConfigAddModal = () => {
        setNacosConfigAddParam({
            visible: false,
            addNacosConfigReq: {
                nacosAddress: "",
                nacosNamespace: "",
                nacosAccount: "",
                nacosPassword: "",
                nacosDescription: ""
            }
        });
    };

    // 处理新增操作
    const handleAddConfig = () => {
        // 简单验证
        const {nacosAddress} = nacosConfigAddParam.addNacosConfigReq;
        if (!nacosAddress) {
            messageApi.error("Nacos连接地址不能为空");
            return;
        }

        // 调用新增配置接口
        doAddNacosConfig(nacosConfigAddParam.addNacosConfigReq);
    };

    // 处理输入变化
    const handleInputChange = (field, value) => {
        setNacosConfigAddParam({
            ...nacosConfigAddParam,
            addNacosConfigReq: {
                ...nacosConfigAddParam.addNacosConfigReq,
                [field]: value
            }
        });
    };

    return (
        <Modal
            title={<div style={{fontSize: '18px', fontWeight: 500}}>新增Nacos配置信息</div>}
            open={nacosConfigAddParam.visible}
            onCancel={closeNacosConfigAddModal}
            maskClosable={false} // 点击遮罩层不关闭弹窗
            width={600} // 增加弹窗宽度
            footer={[
                <Button
                    key="close"
                    icon={<CloseOutlined/>}
                    onClick={closeNacosConfigAddModal}
                    style={{marginRight: 8}}
                >
                    关闭
                </Button>,
                <Button
                    key="submit"
                    type="primary"
                    icon={<SaveOutlined/>}
                    onClick={handleAddConfig}
                >
                    新增
                </Button>
            ]}
        >
            <Form layout="vertical" style={{marginTop: 16}}>
                <Row gutter={[16, 24]}>
                    {/* 连接地址 */}
                    <Col span={24}>
                        <Item
                            label={
                                <span style={{fontWeight: 500, color: '#333'}}>
                                    连接地址 <span style={{color: '#ff4d4f'}}>*</span>
                                </span>
                            }
                            tooltip="Nacos服务器的地址，格式为：http://ip:port"
                        >
                            <Input
                                placeholder="请输入Nacos地址（例如：http://127.0.0.1:8848）"
                                value={nacosConfigAddParam.addNacosConfigReq.nacosAddress}
                                onChange={(e) => handleInputChange('nacosAddress', e.target.value)}
                                style={{
                                    height: 40,
                                    borderRadius: 4,
                                    transition: 'all 0.3s'
                                }}
                            />
                        </Item>
                    </Col>

                    {/* 命名空间 */}
                    <Col span={24}>
                        <Item
                            label={
                                <span style={{fontWeight: 500, color: '#333'}}>
                                    命名空间
                                </span>
                            }
                            tooltip="Nacos中的命名空间，用于隔离不同环境的配置"
                        >
                            <Input
                                placeholder="请输入命名空间（默认为public）"
                                value={nacosConfigAddParam.addNacosConfigReq.nacosNamespace}
                                onChange={(e) => handleInputChange('nacosNamespace', e.target.value)}
                                style={{height: 40, borderRadius: 4}}
                            />
                        </Item>
                    </Col>

                    {/* 账号 */}
                    <Col span={12}>
                        <Item
                            label={
                                <span style={{fontWeight: 500, color: '#333'}}>
                                    连接账号
                                </span>
                            }
                        >
                            <Input
                                placeholder="请输入Nacos连接账号"
                                value={nacosConfigAddParam.addNacosConfigReq.nacosAccount}
                                onChange={(e) => handleInputChange('nacosAccount', e.target.value)}
                                style={{height: 40, borderRadius: 4}}
                            />
                        </Item>
                    </Col>

                    {/* 密码 */}
                    <Col span={12}>
                        <Item
                            label={
                                <span style={{fontWeight: 500, color: '#333'}}>
                                    连接密码
                                </span>
                            }
                        >
                            <Input.Password
                                placeholder="请输入Nacos连接密码"
                                value={nacosConfigAddParam.addNacosConfigReq.nacosPassword}
                                onChange={(e) => handleInputChange('nacosPassword', e.target.value)}
                                style={{height: 40, borderRadius: 4}}
                            />
                        </Item>
                    </Col>

                    {/* 描述 */}
                    <Col span={24}>
                        <Item
                            label={
                                <span style={{fontWeight: 500, color: '#333'}}>
                                    配置描述
                                </span>
                            }
                        >
                            <Input.TextArea
                                placeholder="请输入该Nacos配置的描述信息"
                                value={nacosConfigAddParam.addNacosConfigReq.nacosDescription}
                                onChange={(e) => handleInputChange('nacosDescription', e.target.value)}
                                rows={3}
                                style={{borderRadius: 4, resize: 'none'}}
                            />
                        </Item>
                    </Col>
                </Row>
            </Form>
        </Modal>
    );
};

export default NacosConfigAddModal;
